---
title: Comercio electrónico
description: Una introducción para agregar opciones de comercio electrónico a tu sitio de Astro
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import ReadMore from '~/components/ReadMore.astro'

Con Astro, puedes construir varias opciones de comercio electrónico, desde enlaces de pago hasta páginas de pago alojadas para construir una tienda completa utilizando una API de servicios de pago.

## Superposiciones de procesamiento de pagos

Algunos servicios de procesamiento de pagos (por ejemplo, [Lemon Squeezy](#lemon-squeezy), [Paddle](#paddle)) agregan un formulario de pago para permitir que tu cliente compre en tu sitio. Estos pueden ser superposiciones alojadas o incrustadas en una página de tu sitio. Estos pueden ofrecer alguna personalización básica o branding del sitio, y pueden agregarse a tu proyecto de Astro como scripts, botones o enlaces externos.

### Lemon Squeezy

[Lemon Squeezy](https://www.lemonsqueezy.com/) es una plataforma todo en uno para pagos y suscripciones con soporte multi-moneda, cumplimiento fiscal global, integración de PayPal y más. Te permite crear y gestionar productos y servicios digitales a través de su panel de control de cuenta y proporciona URL de productos para el proceso de pago.

La sencilla [biblioteca para JavaScript de Lemon.js](https://docs.lemonsqueezy.com/help/lemonjs/what-is-lemonjs) te permite vender tus productos de Lemon Squeezy con un enlace de pago.

#### Uso Básico

El siguiente es un ejemplo de cómo agregar un elemento "Comprar ahora" de Lemon Squeezy a una página de Astro. Al hacer clic en este enlace se abrirá un proceso de pago y permitirá al visitante completar una compra única.

1. Agrega la siguiente etiqueta `<script>` al `head` o `body` de tu página:

    ```html title="src/pages/my-product-page.astro"
    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
    ```
2. Crea una etiqueta de anclaje en la página que enlace a la URL de tu producto. Incluye la clase `lemonsqueezy-button` para abrir una superposición de pago al hacer clic.

    ```html title="src/pages/my-product-page.astro"
    <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
      Comprar ahora
    </a>
    ```

#### Lemon.js

Lemon.js también proporciona comportamientos adicionales como [abrir superposiciones programáticamente](https://docs.lemonsqueezy.com/help/lemonjs/opening-overlays) y [manejar eventos de superposición](https://docs.lemonsqueezy.com/help/lemonjs/handling-events).

<ReadMore> Lee la [guía de inicio para desarrolladores de Lemon Squeezy](https://docs.lemonsqueezy.com/guides/developer-guide) para obtener más información.</ReadMore>

### Paddle

[Paddle](https://www.paddle.com/) es una solución de facturación para productos y servicios digitales. Maneja pagos, impuestos y gestión de suscripciones a través de una superposición o un proceso de pago incrustado.

[Paddle.js](https://developer.paddle.com/paddlejs/overview) es una biblioteca de JavaScript ligera que te permite construir experiencias de facturación de suscripción integradas utilizando Paddle.

#### Uso Básico

El siguiente es un ejemplo de cómo agregar un elemento "Comprar ahora" de Paddle a una página de Astro. Al hacer clic en este enlace se abrirá un proceso de pago y permitirá al visitante completar una compra única.

Después de que tu dominio de enlace de pago predeterminado (tu propio sitio web) sea aprobado por Paddle, puedes convertir cualquier elemento de tu página en un disparador para una superposición de pago utilizando atributos de datos HTML.

1. Agrega las siguientes dos etiquetas `<script>` al `head` o `body` de tu página:

    ```html title="src/pages/my-product-page.astro"
    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
    <script type="text/javascript">
      Paddle.Setup({ 
        token: '7d279f61a3499fed520f7cd8c08' // reemplaza con un token del lado del cliente
      });
    </script>
    ```
2. Convierte cualquier elemento de tu página en un botón de pago de Paddle agregando la clase `paddle_button`:

    ```html title="src/pages/my-product-page.astro"
    <a href='#' class='paddle_button'>Comprar ahora</a>
    ```
3. Agrega un atributo `data-items` para especificar el `priceID` y la `quantity` de tu producto en Paddle. También puedes pasar opcionalmente [atributos de datos HTML](https://developer.paddle.com/paddlejs/html-data-attributes) adicionales para prellenar datos, manejar el éxito del pago, o dar estilo a tu botón y superposición de pago:

    ```html title="src/pages/my-product-page.astro"
    <a 
      href='#' 
      class='paddle_button'
      data-display-mode='overlay'
      data-theme='light'
      data-locale='en'
      data-success-url='https://example.com/thankyou'
      data-items='[
        {
        "priceId": "pri_01gs59hve0hrz6nyybj56z04eq", 
        "quantity": 1
        }
      ]'
      >
      Comprar ahora
    </a>
    ```

#### Paddle.js

En lugar de pasar atributos de datos HTML, puedes enviar datos a la superposición de pago utilizando JavaScript para pasar múltiples atributos y aún mayor personalización. También puedes crear flujos de trabajo de actualización utilizando un pago en línea.

<ReadMore>Lee más sobre [cómo usar Paddle.js para construir un pago en línea](https://developer.paddle.com/build/checkout/build-branded-inline-checkout).</ReadMore>


## Soluciones de comercio electrónico completas

Para obtener más personalización sobre el carrito de compras de tu sitio y el proceso de pago, puedes conectar un proveedor de servicios financieros más completo (por ejemplo, [Snipcart](#snipcart)) a tu proyecto de Astro. Estas plataformas de comercio electrónico también pueden integrarse con otros servicios de terceros para la gestión de cuentas de usuario, personalización, inventario y análisis.

### Snipcart

[Snipcart](https://snipcart.com/) es una poderosa, plataforma de carrito de compras HTML/JavaScript para desarrolladores.

Snipcart también te permite integrarte con servicios de terceros como proveedores de envío, habilitar webhooks para una integración avanzada de comercio electrónico entre tu carrito de compras y otros sistemas, elegir entre varios pasarelas de pago (por ejemplo, Stripe, Paypal y Square), personalizar plantillas de correo electrónico e incluso proporciona entornos de prueba en vivo.

:::tip
¿Quieres una solución preconstruida de Snipcart en su lugar? Echa un vistazo a [`astro-snipcart`](https://astro-snipcart.vercel.app/), una plantilla de la comunidad de Astro completamente funcional que incluye un sistema de diseño opcional, lista para que la integres con tu cuenta de Snipcart.
:::

#### Uso Básico

El siguiente es un ejemplo de cómo configurar un pago de Snipcart y agregar elementos de botón para "Agregar al carrito" y "Pagar ahora" a una página de Astro. Esto permitirá a tus visitantes agregar productos a un carrito sin ser enviados inmediatamente a una página de pago.

<ReadMore>Para leer las instrucciones completas, incluyendo la configuración de tu tienda Snipcart, por favor ve [la documentación de instalación de Snipcart](https://docs.snipcart.com/v3/setup/installation).</ReadMore>

1. Agrega el script [como se muestra en las instrucciones de instalación de Snipcart](https://docs.snipcart.com/v3/setup/installation) en tu página después del elemento `<body>`.
    ```html title="src/pages/my-product-page.astro"
    <body></body>
    <script>
      window.SnipcartSettings = {
        publicApiKey: "TU_CLAVE_API",
        loadStrategy: "on-user-interaction",
      };

      (function()...); // disponible en la documentación de Snipcart
    </script>
    ```

2. Personaliza `window.SnipcartSettings` con cualquiera de los [ajustes de Snipcart disponibles](https://docs.snipcart.com/v3/setup/installation#settings) para controlar el comportamiento y la apariencia de tu carrito.

    ```html title="src/pages/my-product-page.astro"
    <script>
      window.SnipcartSettings = {
        publicApiKey: "TU_CLAVE_API",
        loadStrategy: "manual",
        version: "3.7.1",
        addProductBehavior: "none",
        modalStyle: "side",

      };

      (function()...); // disponible en la documentación de Snipcart
    </script>
    ```

3. Agrega `class="snipcart-add-item"` a cualquier elemento HTML, como un `<button>`, para agregar un elemento al carrito al hacer clic en él. También incluye cualquier otro elemento de datos para [atributos de producto comunes de Snipcart](https://docs.snipcart.com/v3/setup/products) como precio y descripción, y cualquier campo opcional.

    ```html title="src/pages/my-product-page.astro"
    <button class="snipcart-add-item"
      data-item-id="astro-print"
      data-item-price="39.99"
      data-item-description="Una impresión enmarcada del logotipo de Astro."
      data-item-image="/assets/images/astro-print.jpg"
      data-item-name="Impresión de Astro"
      data-item-custom1-name="Marco de color"
      data-item-custom1-options="Café|Plata[+10.00]|Oro[+20.00]"
      data-item-custom2-name="Instrucciones de entrega"
      data-item-custom2-type="textarea">
      
      Agregar al carrito
    </button>
    ```

4. Agregar un botón de pago de Snipcart con la clase `snipcart-checkout` para abrir el carrito y permitir a los visitantes completar su compra con un modal de pago.

    ```html title="src/pages/my-product-page.astro"
    <button class="snipcart-checkout">Haz clic aquí para pagar</button>
    ```

#### Snipcart JavaScript SDK

El [SDK de JavaScript de Snipcart](https://docs.snipcart.com/v3/sdk/basics) te permite configurar, personalizar y gestionar tu carrito de Snipcart programáticamente.

Esto te permite realizar acciones como:

- Recuperar información relevante sobre la sesión actual de Snipcart y aplicar ciertas operaciones al carrito.
- Escuchar eventos entrantes y activar devoluciones de llamada dinámicamente.
- Escuchar cambios de estado y recibir una instantánea completa del estado del carrito.

<ReadMore>Consulta la [documentación de Snipcart](https://docs.snipcart.com/v3/) para obtener más información sobre todas las opciones para integrar Snipcart con tu proyecto de Astro.</ReadMore>

#### `astro-snipcart`

Hay dos paquetes de la comunidad `astro-snipcart` que pueden simplificar el uso de Snipcart.

- [Plantilla de Astro `@lloydjatkinson/astro-snipcart`]: Esta plantilla de Astro incluye un sistema de diseño opcional para una solución de comercio electrónico completa lista para usar. Aprende más en su propio sitio de documentación extensa, incluyendo [la motivación detrás de la construcción de `astro-snipcart`](https://astro-snipcart.vercel.app/motivation) como una forma conveniente y nativa de Astro para que interactúes con la API de Snipcart.

- [Integración `@Adammatthiesen/astro-snipcart`](https://github.com/Adammatthiesen/astro-snipcart): Esta integración se inspiró en gran medida en el tema `astro-snipcart` y proporciona componentes de Astro (o componentes de Vue) que puedes agregar a tu proyecto de Astro existente para crear productos, controlar el carrito y más. Consulta el [tutorial completo](https://matthiesen.xyz/blog/getting-started-with-my-astro-snipcart-addon) para obtener más información.

## Recursos de la comunidad

- [Experiencia práctica: ¿Tienda de comercio electrónico con Astro?](https://crystallize.com/blog/building-ecommerce-with-astro)
